<template>
  <div class="recharge" v-loading="loading">
    <merchantNum />
    <div class="to-recharge_button" @click="toRecharge">
      去充值
    </div>
    <plainTable :tableData="tableData" :tableConfigData="tableConfigData" :pageInfo="pageInfo" tableTitle="充值紀錄"
      @prevPage="prevPage" @nextPage="nextPage" />
    <el-dialog v-model="rechargeDialogVisible" class="rechargeDialog" :class="{ payInfo: payStep === 2 }"
      :show-close="false">
      <template v-if="payStep === 1">
        <el-form :model="payForm" :rules="payFormRules" ref="formDom" class="myPayForm" v-loading="loading">
          <el-form-item label="國別" prop="country">
            <el-select v-model="payForm.country" placeholder="請選擇國別">
              <el-option :label="item.label" :value="item.value" v-for="item in countries" :key="item.value" />
            </el-select>
          </el-form-item>
          <el-form-item label="支付方式" prop="payMethod">
            <el-select v-model="payForm.payMethod" placeholder="請選擇支付方式">
              <el-option :label="item.label" :value="item.value" v-for="item in payMethods" :key="item.value" />
            </el-select>
          </el-form-item>
          <el-form-item label="名字" prop="name">
            <el-input v-model="payForm.name" placeholder="請輸入名字" />
          </el-form-item>
          <el-form-item label="銀行編碼" prop="bankCode">
            <el-input v-model="payForm.bankCode" placeholder="請輸入銀行編碼" readonly/>
          </el-form-item>
          <el-form-item label="付款額" prop="payMoney">
            <el-input v-model="payForm.payMoney" placeholder="請輸入付款額" />
          </el-form-item>
          <el-form-item label="貨幣" prop="currency">
            <!-- <el-select v-model="payForm.currency" placeholder="請選擇貨幣">
              <el-option :label="item.label" :value="item.value" v-for="item in currencies" :key="item.value" />
            </el-select> -->
            <el-input v-model="payForm.currency" placeholder="請輸入付款額" readonly/>
          </el-form-item>
          <el-form-item label="描述" prop="description">
            <el-input v-model="payForm.description" placeholder="請輸入描述" />
          </el-form-item>
          <el-form-item label="手機號" prop="name">
            <el-input v-model="payForm.phone" placeholder="請輸入手機號" />
          </el-form-item>
          <el-form-item class="button-group">
            <el-button @click="onClickCancelPay">取消</el-button>
            <el-button type="primary" @click="onClickConfirmPay" style="margin-left: 40px"
              :loading="loading">確認</el-button>
          </el-form-item>
        </el-form>
      </template>
      <template v-if="payStep === 2">
        <div class="pay-result">
          <div class="tit">支付信息</div>
          <el-input v-model="payInfoEno" class="eno-input" />
          <div class="pay-img_wrap">
            <img src="@/assets/image/pay-img.png" class="pay-img" />
          </div>
          <div class="btn-group">
            <div class="getIt" @click="finishPay">
              知道了
            </div>
          </div>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import merchantNum from "@/components/merchantNum.vue";
import plainTable from "@/components/plainTable.vue";
import { ref } from "vue";
import { useRecharge } from "@/hooks/account"


const { initData,loading, tableConfigData, tableData, pageInfo, payForm, payFormRules, countries, payMethods, confirmPay, payStep, payInfoEno } = useRecharge();

const rechargeDialogVisible = ref(false);
const formDom = ref(null);

// 确认支付
const onClickConfirmPay = () => {
  confirmPay(formDom);
};
// 取消支付
const onClickCancelPay = () => {
  rechargeDialogVisible.value = false;
};

// 完成支付
const finishPay = () => {
  rechargeDialogVisible.value = false;
  initData();
}
const prevPage = () => {
  if (pageInfo.value.currentPage === 1) {
    return;
  }
  pageInfo.value.currentPage--;
  initData();
}


const nextPage = () => {
  if (pageInfo.value.currentPage === pageInfo.value.totalPage) {
    return;
  }
  pageInfo.value.currentPage++;
  initData();
}

const toRecharge = () => {
  if(payStep.value === 2) {
    payStep.value = 1;
  }
  rechargeDialogVisible.value = true;
}


</script>
<style scoped lang="scss">
.recharge {
  .to-recharge_button {
    margin-top: 49px;
    width: 200px;
    height: 49px;
    text-align: center;
    line-height: 49px;
    color: #fff;
    background-color: #2fc2af;
    margin-bottom: 32px;
    cursor: pointer;

    &:hover {
      opacity: 0.8;
    }
  }

  .plain-table {
    margin-top: 32px;
  }

  :deep(.rechargeDialog) {
    width: 866px;
    height: 583px;
    border-radius: 8px;
    background: #ffffff;
    box-shadow: 0px 4px 10px 0px #0000004c;

    &.payInfo {
      width: 612px;
      height: 453px;
    }
  }

  :deep(.myPayForm) {
    .el-form-item__label {
      width: 113px;
      height: 34px;
      font-size: 18px;
      font-weight: 400;
      background-color: #3b72ad;
      color: #fff;
      display: flex;
      justify-content: center;
      border-radius: 2px;

      &::before {
        opacity: 0;
      }
    }

    .el-form-item__content {
      width: 217px;
      height: 35px;
      border-radius: 2px;
      flex-grow: 0;
      flex-basis: auto;
      margin-left: 27px;

      .el-select__wrapper {
        background: linear-gradient(180deg, #ffffff 0%, #fafafa 100%);
      }

      .el-input__wrapper {
        background: linear-gradient(180deg, #ffffff 0%, #fafafa 100%);
      }
    }

    .button-group {
      margin-top: 28px;

      .el-form-item__content {
        display: flex;
        justify-content: center;
        flex-grow: 1;

        .el-button {
          width: 140px;
          height: 34px;

          &.el-button--primary {
            background-color: #2fc2af;
          }
        }
      }
    }
  }

  .pay-result {
    .tit {
      color: #3d3d3d;
      font-size: 24px;
      font-weight: 500;
    }

    .eno-input {
      margin-top: 38px;
    }

    .pay-img_wrap {
      text-align: center;

      .pay-img {
        width: 448px;
        height: 205px;
        margin-top: 14px;
      }
    }

    .btn-group {
      display: flex;
      justify-content: center;
      margin-top: 30px;

      .getIt {
        width: 140px;
        height: 34px;
        background-color: #2fc2af;
        color: #fff;
        font-size: 18px;
        font-weight: 400;
        text-align: center;
        line-height: 34px;
        cursor: pointer;
      }
    }
  }
}
</style>
